<template>
	<view>
		<view class="search-input">
			<view class="search-input-box">
				<view class="search-input-left">
					<image src="../../static/index/search.png" mode="aspectFill"></image>
					<input type="text" :focus="true" placeholder="搜索商品名称" :value="keyWord"
						placeholder-style="font-size:28rpx;" @confirm="BindSearchKeyWord" @input="inputAdress">
				</view>
				<view class="search-map" @click="BindSearchKeyWord">搜索</view>
			</view>
		</view>
		<block v-if="!orderShow">
			<!-- 历史搜索 -->
			<view class="search-history" v-if="!keyWord && lastLabelArray.length>0">
				<view class="history-title">
					<view>历史搜索</view>
					<view class="history-title-img" @click="removeSearchLast">
						<image src="../../static/index/delete.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 历史搜索标签 -->
				<view class="history-label">
					<view v-for="(keyword , windex) in lastLabelArray" :key="windex" class="label-item"
						@click="lastSearchMed(keyword)">{{keyword.keyWord}}</view>
				</view>
			</view>

			<!-- 热门搜索 -->
			<!-- <view class="search-history" v-if="!keyWord">
				<view class="history-title">
					<view>热门搜索</view>
				</view>
				<view class="hot-words-label" style="margin-top: 40rpx;">
					<view v-for="(words , wordsindex) in hotWords" :key="wordsindex" class="hot-label word-line-clamp1"
						@click="lastSearchMed(words)">{{words.keyWord}}</view>
				</view>
			</view> -->
			<!--  热门搜索 -->
			<!-- <view class="search-hot" v-if="!keyWord" :class="{'search-hot-label' : lastLabelArray.length<=0}">
				<view class="hot-title">
					大家都爱去
				</view>
				<scroll-view :scroll-x="true" class="scroll-view" :bounces='true' :enhanced='true'
					:show-scrollbar='false'>
					<view class="week-item" v-for="(week,weindex) in hotStoreList" :key='weindex'
						@click="jumpHotDetil(week)">
						<image :src="week.thumb_img" mode="aspectFill"></image>
						<view class="week-info">
							<view class="week-name word-line-clamp1">{{week.name}}</view>
							<view class="week-distance">{{week.province}}｜{{week.distance}}</view>
						</view>
					</view>
					<view class="week-item1" style='width:30rpx;'>
						<image style='width:30rpx;' mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view> -->
		</block>
		<!-- 搜索列表 -->
		<view class="search-list-box" v-if="searchList.length>0">
			<view class="search-result" v-for=" (item , index) in searchList" :key="index" @click="jumpDetil(item)">
				<view class="search-item">
					<image src="../../static/index/distance.png" mode="aspectFill"></image>
					<view class="search-name">
						<view>{{item.name}}</view>
						<view>{{item.address}}</view>
					</view>
				</view>
			</view>
			<view class="search-end-tip" v-if="isLastPage">
				没有更多啦
			</view>
		</view>

		<view class="search-none" v-if="noneFlag">
			暂无更多
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		apiGetNearbyStores
	} from '../../apis/index.js';
	
	import {
		productSearch
	} from '../../apis/my.js';
	export default {
		data() {
			return {
				keyWord: "",
				noneFlag: false,
				searchList: [],

				currentPage: 1,
				pageSize: 10,
				isLastPage: false,

				adCode: '',
				adType: 0,

				latitude: app.globalData.latitude,
				longitude: app.globalData.longitude,

				lastLabelArray: [], // 历史标签
				hotStoreList: [], //热门搜索商家
				hotWords: [], // 热门词

				orderShow: false,
			};
		},

		onShow() {
			let that = this;
			// that.SearchLastLabel();
			// that.SearchLHotList(); //热门搜索
			// that.SearchLHotWordsList(); //热门词
		},
		onLoad(options) {
			console.log(options, "op")
			if (options.order) {
				this.orderShow = true
				this.GetSearchList();
			} else {
				this.orderShow = false
			}

		},

		onReachBottom() {
			let that = this;
			if (!that.isLastPage && that.keyWord) {
				that.currentPage++;
				that.GetSearchList(); //搜索触底加载
			}
		},

		methods: {
			// 删除历史标签
			removeSearchLast() {
				let that = this;
				that.lastLabelArray = [];
				// 调用删除接口
				app.httpRequest({
					url: app.globalData.api.search.ClearSearch,
				}).then(clearResult => {})
			},
			// 历史标签搜索
			lastSearchMed(label) {
				let that = this;
				label.id = label.sourceId;
				if (label.sourceType !== 0) {
					label.name = label.keyWord;
					that.SearchLog(label);
					uni.navigateTo({
						url: '../storeDetail/storeDetail?store_id=' + label.sourceId,
					});
				} else {
					that.keyWord = label.keyWord;
					that.currentPage = 1;
					that.searchList = [];
					that.noneFlag = false;
					that.isLastPage = false;
					that.SearchLog();
					that.GetSearchList();
				}
			},
			// 热门搜索词
			SearchLHotWordsList() {
				let that = this;
				let local = that.latitude + "," + that.longitude;
				app.httpRequest({
					url: app.globalData.api.search.HotSearchWords,
					data: {
						location: local
					}
				}).then(hotWords => {
					switch (hotWords.code) {
						case 200:
							if (hotWords.data.length > 0) {
								that.hotWords = hotWords.data;
							}
							break;
						default:
							uni.showToast({
								title: hotWords.message,
								icon: 'none'
							})
							break;
					}
				})
			},

			// 热门搜索商家 大家都爱去
			SearchLHotList() {
				let that = this;
				let local = that.latitude + "," + that.longitude;
				app.httpRequest({
					url: app.globalData.api.search.HotSearchStore,
					data: {
						location: local,
						adCode: '',
						adType: that.adType
					}
				}).then(hotSearchList => {
					switch (hotSearchList.code) {
						case 200:
							if (hotSearchList.data.length > 0) {
								that.hotStoreList = hotSearchList.data;
							}
							break;
						default:
							uni.showToast({
								title: hotSearchList.message,
								icon: 'none'
							})
							break;
					}
				})
			},
			// 搜索日志添加
			SearchLog(key) {
				let that = this;
				console.log(key, that.keyWord)
				app.httpRequest({
					url: app.globalData.api.search.SearchLog,
					data: {
						keyWord: key ? key.name : that.keyWord,
						source_type: key ? 1 : 0,
						source_id: key ? key.id : '0'
					}
				}).then(searchLogResult => {})
			},

			// 搜索历史
			SearchLastLabel() {
				let that = this;
				app.httpRequest({
					url: app.globalData.api.search.SearchLast
				}).then(searchLast => {
					if (searchLast.data.length > 0) {
						that.lastLabelArray = searchLast.data;
					}
				})
			},

			inputAdress(e) {
				let that = this;
				that.keyWord = e.detail.value;
				that.searchList = [];
				let local = that.latitude + "," + that.longitude;
				if (e.detail.value !== '') {
					that.searchList = [];
					that.noneFlag = false;
					that.isLastPage = false;
					that.currentPage = 1;
					that.GetSearchList()
				} else {
					// that.SearchLastLabel(); //更新搜索历史
					that.searchList = [];
					that.noneFlag = false;
					that.isLastPage = false;
					that.currentPage = 1;
				}
			},
			// 确认搜索
			BindSearchKeyWord() {
				let that = this;
				if (that.keyWord) {
					that.searchList = [];
					that.noneFlag = false;
					that.isLastPage = false;
					that.currentPage = 1;
					that.GetSearchList()
					// that.SearchLog();
				}
			},
			jumpHotDetil(store) {
				uni.navigateTo({
					url: '../storeDetail/storeDetail?store_id=' + store.id,
				});
			},
			jumpDetil(store) {

				console.log(store, "store")
				switch (store.type) {
					case 1:
						uni.navigateTo({
							url: `/pageC/pointEquity/pointEquity?store_id=${store.id}`
						})
						break;
					case 2:
					  uni.navigateTo({
					  	url: `/pageC/pointGroup/pointGroup?store_id=${store.id}`
					  })
					  break;
				  case 3:
						uni.navigateTo({
						  url: `/pageC/pointGroup/pointGroup?store_id=${store.id}`
						})
						break;
					default:
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						break;
				}
				// if (this.orderShow) {
				// 	console.log("回去")
				// 	let obj = {
				// 		name: store.name,
				// 		id: store.id
				// 	}
				// 	// uni.setStorageSync('sendStore', obj);
				// 	uni.$emit('isRefresh', obj)
				// 	uni.navigateBack({
				// 		delta: 1
				// 	})

				// } else {
				// 	this.SearchLog(store);
				// 	uni.navigateTo({
				// 		url: '../storeDetail/storeDetail?store_id=' + store.id,
				// 	});
				// }

			},
			GetSearchList() {
				let that = this;
				let local = that.latitude + "," + that.longitude;

				const params = {
					page: that.currentPage,
					pageSize: that.pageSize,
					keyWord: that.keyWord,
				}
				productSearch(params).then(res => {
					if (res.data.list.length > 0) {
						that.noneFlag = false;
						that.searchList = that.searchList.concat(res.data.list);
						that.isLastPage = res.data.lastPage;
						that.loading = false;
					} else {
						//没有该关键词的信息
						that.noneFlag = true;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	// 搜索框
	.search-input {
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #999999;

		.search-input-box {
			display: flex;
			justify-content: space-between;
			background: #F1F2F5;
			border-radius: 40rpx;
			width: 690rpx;
			margin: 0 30rpx;
			height: 78rpx;
			line-height: 78rpx;
			align-items: center;

			.search-input-left {
				width: 80%;
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
					margin: 0 10rpx 0 34rpx;
				}

				.swiper_zi {
					width: 100%;
					height: 78rpx;
				}
			}

			.search-map {
				height: 25rpx;
				line-height: 25rpx;
				padding: 0 20rpx;
				padding-right: 34rpx;
				border-left: 1rpx solid #bbb;
				font-size: 24rpx;
				color: #333333;
			}
		}

		input {
			font-size: 28rpx;
			height: 32rpx;
			color: #333333;
			line-height: 90rpx;
			width: 80%;
		}
	}

	// 搜索列表
	.search-list-box {
		width: 100%;
		position: absolute;
		background-color: #fff;
		top: 145rpx;
		left: 0;
		z-index: 5;
	}

	.search-item {
		display: flex;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1rpx solid #efefef;

		// align-items: center;
		image {
			width: 19rpx;
			height: 25rpx;
			margin-right: 18rpx;
			margin-top: 5rpx;
		}

		.active-search {
			color: #FA6400;
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			right: 30rpx;
		}

		.search-name {
			width: 650rpx;

			text {
				font-weight: normal !important;
				font-size: 24rpx !important;
				margin-left: 12rpx;
				color: #999 !important;
			}

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 4rpx;
				color: #333333;
			}

			view:nth-child(2) {
				font-size: 24rpx;
				color: #999999;
				line-height: 33rpx;
			}
		}
	}

	// 
	.search-end-tip {
		font-size: 24rpx;
		text-align: center;
		padding: 40rpx;
		color: #999;
	}

	//  没有结果
	.search-none {
		margin: 0 30rpx;
		width: 690rpx;
		font-size: 28rpx;
		text-align: center;
		padding: 30rpx 0;
		position: absolute;
		background-color: #fff;
		// border-bottom: 1rpx solid #f5f5f5;
		color: #999;
		top: 145rpx;
		left: 0;
		z-index: 5;
	}

	// 热门搜索
	.search-hot {
		padding: 30rpx;

		.hot-title {
			padding: 30rpx 0;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
		}
	}

	.search-hot-label {
		margin-top: 30rpx !important;
	}

	.scroll-view {
		overflow-x: hidden !important;
		white-space: nowrap;
		height: 320rpx;
	}

	.week-item {
		display: inline-block;
		position: relative;
		width: 202rpx;
		background: #FFFFFF;
		margin-right: 20rpx;

		image {
			width: 202rpx;
			height: 144rpx;
			display: block;
			border-radius: 12rpx;
		}

		.week-info {
			width: 202rpx;
			background-color: #ffffff;
			margin-top: 10rpx;
		}

		.week-name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
		}

		.week-distance {
			font-size: 22rpx;
			color: #999999;
			margin-top: 6rpx;
			line-height: 30rpx;
		}
	}

	// 历史搜索
	.search-history {
		padding: 30rpx;

		.history-title {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: bolder;
			color: #333333;
			line-height: 40rpx;

			.history-title-img {
				text-align: right;
				width: 40rpx;
				height: 40rpx;

				image {
					width: 32rpx;
					margin-top: 4rpx;
					height: 32rpx;
				}
			}

			.change-word {
				font-size: 24rpx;
				color: #666666 !important;
			}
		}

		.history-label {
			margin-top: 30rpx;
			display: flex;
			flex-wrap: wrap;

			.label-item {
				white-space: nowrap;
				min-width: 70rpx;
				height: 54rpx;
				padding: 0 12rpx;
				line-height: 54rpx;
				background: #F4F4F4;
				border-radius: 28rpx;
				text-align: center;
				font-size: 24rpx;
				color: #333333;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.hot-words-label {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.hot-label {
				width: 40%;
				font-size: 24rpx;
				color: #333333;
				line-height: 33rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
